<template>
  <div class="body">
    <!-- 青年旅舍注册界面 -->
    <el-row>
      <el-col :span="10" :offset="7">
        <h1>
          <img src="http://www.yhachina.com/images/logo.png" alt="" />
        </h1>
      </el-col>
      <el-col :span="8" :offset="8" class="box">
        <h2><span>欢迎注册YHA<font style="vertical-align: super; font-size: 50%">®</font>青年旅舍</span></h2>
        <el-form
          class="demo-form"
          :model="form"
          status-icon
          :rules="rules"
          ref="form"
          label-width="80px"
        >
          <el-form-item label="用户名" prop="uname">
            <el-input v-model.number="form.uname"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="user">
            <el-input v-model.number="form.user"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model.number="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input
              type="password"
              v-model="form.pwd"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="form.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="type">
            <el-checkbox
              name="check"
              v-model="form.type"
              label="我已阅读并同意"
            >
            </el-checkbox>
            <el-button @click="open" type="text"
              >《青年旅舍®用户注册协议》</el-button
            >
          </el-form-item>
          <el-button
            round
            type="success"
            @click="submitForm('form')"
            style="width: 100%"
            >确认注册</el-button
          >
          <el-button type="text" style="margin-left: 60%" @click="tiaozhuan"
            >我已有账号，返回登录</el-button
          >
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import myaxios from '@/http/MyAxios.js'
export default {
  data() {
    return {
      form: {
        user: '',
        uname: '',
        phone: '',
        pwd: '',
        checkPass: '',
        type: [],
      },
      rules: {
        uname: [
          { required: true, message: '请输用户名', trigger: 'blur' },
          {
            pattern: /^.{2,16}$/,
            message: '用户名应为2~16个字符',
            trigger: 'blur',
          },
        ],
        user: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9]{6,16}$/,
            message: '账号应为数字、英文组成的6~16个字符',
            trigger: 'blur',
          },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur',
          },
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern:
              /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{6,16}$/,
            message: '6-16位字符,为字母、数字、特殊符号，至少两种组合',
            trigger: 'blur',
          },
        ],
        type: [
          {
            required: true,
            message: '请查看注册协议',
            trigger: 'change',
          },
        ],
        checkPass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value == this.form.pwd) {
                callback()
              }
              callback(new Error('两次密码输入不一致'))
            },
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    tiaozhuan() {
      this.$router.push('/login')
    },
    open() {
      this.$alert(
        '如您作为未成年人的监护人代其注册，请注意阅读该条款',
        '青年旅舍®用户注册协议',
        {
          confirmButtonText: '同意',
        }
      )
    },
    submitForm(form) {
      this.$refs['form'].validate(valid => {
        if (valid) {
          console.log('注册成功')
          let url = 'http://127.0.0.1:3000/register'
          let params = {
            user: this.form.user,
            uname: this.form.uname,
            phone: this.form.phone,
            pwd: this.form.pwd,
            // 默认头像
            uhead: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp481993218.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671283826&t=f80d079d838f8c205bbb96e418109',
          }
          myaxios.post(url, params).then(res => {
            console.log(res)
            if (res.data.code == 200) {
              this.$message({
                message: '恭喜你，注册成功',
                type: 'success',
              })
              // 重置
              this.$refs['form'].resetFields()
              // 挑转到登录页
              this.$router.push('/login')
            }else if(res.data.code == 201){
              this.$message({
                message: '账号或手机号已被占用,请更改',
                type: 'error',
              })
            }
          })
        } else {
          console.log('注册失败！')
          this.$message({
                message: '注册失败！',
                type: 'error',
              })
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
h1 {
  width: 100%;
  text-align: center;
  margin: 30px 0;
}
.box {
  background-color: #f4fbff;
  border-radius: 10px;
  padding: 20px 50px;
  margin-bottom: 20px;

  h2 {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #dcdcdc;
    span {
      display: inline-block;
      padding-bottom: 10px;
      border-bottom: 2px solid #87c524;
    }
  }
}
.body {
  background: url('http://www.yhachina.com/images/login-registration/registration-bg.jpg')
    no-repeat center;
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: auto;
}
</style>
